import React, { useEffect, useState } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, ScrollView, Text, TouchableOpacity } from 'react-native'
import { fundListStyle } from './styles'
import { commonStyle } from 'styles'
import { getAuthorization } from 'services/authorization'
import { CustomerItem, TradItem } from './components'
import posApi, { PosCustomer, PosAppTrade, PosAppBank } from 'api/pos';
import Loading from 'components/loading'
/**
 * 补差款
 * @param props
 */
const FillingInFundScreen: NavigationStackScreenComponent<{ data: PosCustomer }> = props => {
	const [bankList, setBankList] = useState<PosAppBank[]>([])
	const [tradeList, setTradeList] = useState<PosAppTrade[]>([])
	const [noData, setNoData] = useState(false)

	useEffect(() => {
		Loading.show()
		posApi.posApp
			.getFee({
				...{
					scene: 'sbck',
					projectId: getAuthorization().project.id
				}, ...props.navigation.getParam('data')
			})
			.then(res => {
				// res.customer && setCustomerData(res.customer)
				res.tradeList && setTradeList(res.tradeList)
				if (!res.tradeList || res.tradeList.length < 1) {
					setNoData(true)
				}
				res.bankList && setBankList(res.bankList)
			}).finally(() => { Loading.hide() })
	}, [])

	return (
		<View style={fundListStyle.container}>
			{/* <CustomerItem data={customerData} /> */}
			{noData ? (<Text style={commonStyle.noDataWarn}>未找到交易或者款项，请确认用户信息是否正确！</Text>) :
				(<ScrollView>
					<View style={commonStyle.containerColumn}>
						{tradeList ?.map((item, index) => (
							<TradItem key={index} data={item} onItemPress={data => {
								props.navigation.navigate('TradList', {
									type: 'FillingFund',
									tradeInfo: data,
									bankList,
									scene: 'sbck'
									// customerInfo: customerData,
								})
							}} />
						))}
					</View>
				</ScrollView>)}
		</View>
	)
}

FillingInFundScreen.navigationOptions = props => {
	return {
		title: '选择交易',
	}
}

export default FillingInFundScreen
